<template>
  <div class="successLogin">
    <van-nav-bar title="我的账号" right-text="退出登录" @click-right="layout" />
    <div class="myAccount">
      <img :src="avatarUrl" alt="" />
      <h4>昵称:{{ nickname }}</h4>
      <p>签名:{{ signature == "" ? "无" : signature }}</p>
      <van-button
        type="default"
        icon="home-o"
        round
        block
        :to="{ name: 'search' }"
        >首页</van-button
      >
      <van-button
        type="default"
        icon="tv-o"
        round
        block
        :to="{ name: 'mvList' }"
        >每日MV</van-button
      >
      <van-button
        type="default"
        icon="friends-o"
        round
        block
        :to="{ name: 'login' }"
        >更换账号登录</van-button
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      loading: true,
      phoneNumber: "",
      password: "",
      nickname: "",
      signature: "",
      avatarUrl: "",
    };
  },

  created() {
    if (localStorage.getItem("token")) {
      // 如果token存在,正常进入页面
      this.phoneNumber = localStorage.getItem("phoneNumber");
      this.password = localStorage.getItem("password");
      axios
        .get(
          "http://localhost:3000/login/cellphone?phone=" +
            this.phoneNumber +
            "&password=" +
            this.password
        )
        .then((res) => {
          // console.log(res.data.profile);
          this.nickname = res.data.profile.nickname;
          this.signature = res.data.profile.signature;
          this.avatarUrl = res.data.profile.avatarUrl;
          // 获取用户id,并保存id
          localStorage.setItem("userId", res.data.account.id);
        });
    } else {
      // 如果token不存在,转入登录界面
      localStorage.removeItem("token");
      this.$router.push({
        name: "login",
      });
    }
  },

  mounted() {
    this.loading = false;
  },
  methods: {
    layout() {
      localStorage.removeItem("token");
      localStorage.removeItem("phoneNumber");
      localStorage.removeItem("password");
      this.$router.push({
        name: "login",
      });
    },
  },
};
</script>

<style>
.successLogin .van-nav-bar__text {
  color: rgb(219, 65, 65);
}
.successLogin .myAccount {
  overflow: auto;
  text-align: center;
}
.successLogin .myAccount img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 10px auto;
}
.successLogin .myAccount h4 {
  font-size: 14px;
  line-height: 50px;
  color: rgb(219, 65, 65);
}
.successLogin .myAccount p {
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 20px;
  color: #aaa;
}
.successLogin .myAccount .van-button--block {
  width: 60%;
  margin: 10px auto;
  border: 1px solid rgb(219, 65, 65);
}
</style>
